import { useState, useEffect } from 'react'
import BusinessMap from '../../../../common/BusinessMap';
import Bgsc from './Bgsc';
import LeftFlow from './LeftFlow';
import Leftpanel from './LeftPanel';
import { testYxfxData, testYxjcData, testZhData } from './testData';
import Xzzh from './Xzzh';
import Yxfx from './Yxfx';
import Zhjc from './Zhjc';
import ZhpgContext from './ZhpgContext';
import YxfxXq from './Yxfx/YxfxXq';
import Xq from './Yxfx/Xq';
import './index.less';
import { createLayer, dataToFeature } from '../../../../../utils/helper/mapHelper';
import { Icon, Style } from 'ol/style';
import { resourcePath } from '../../../../../utils/resource';
import useBusinessMap from '../../../../common/BusinessMap/useBusinessMap';
import Sdfx from './Sdfx';
export default function Zhpg(props) {
    const [item, setItem] = useState({key:'xzzh'});
    const [zhData, setZhData] = useState(); // 灾害数据
    const [yxfxData, setYxfxData] = useState(); // 影响分析结果数据
    const [zhjcData, setZhjcData] = useState(); // 指挥决策结果数据

    const [yxfxxq, setYxfxxq] = useState(false); // 表格详情弹窗是否显示
    const [yxfxxq1, setYxfxxq1] = useState(false); // 详情弹窗是否显示

    const [sdfxData, setSdfxData] = useState(false);


    const [detail, setDetail] = useState();
    const [rightDetail, setRightDetail] = useState();


    return <>
        <BusinessMap>
            <ZhpgContext.Provider value={{
                zhData,
                yxfxData,
                zhjcData,
                sdfxData
            }}>
                <LeftFlow item={item} onChange={item => {
                    setItem(item);
                    setYxfxxq(false);
                    setYxfxxq1(false);
                }} />
                {<div style={{
                    display: item && ['bgsc'].indexOf(item.key) === -1 ? 'block' : 'none'
                }}>
                    <Leftpanel title={item?.label} onClose={e => setItem(null)} >
                        {<div className='h100' style={{
                            display: item?.key === 'xzzh' ? 'block' : 'none'
                        }}>
                            <Xzzh onSelected={data => {
                                setZhData(data)
                            }} />
                        </div>}
                        {<div style={{
                            display: item?.key === 'yxfx' ? 'block' : 'none'
                        }}>
                            <Yxfx onCompleted={data => {
                                setYxfxData(data)
                            }} onDetail={(data) => {
                                setDetail(data);
                            }} />
                        </div>}
                        {<div style={{
                            display: item?.key === 'sdfx' ? 'block' : 'none'
                        }}>
                            <Sdfx visible={item?.key === 'sdfx'} onCompleted={data => {
                                setSdfxData(data)
                            }} />
                        </div>}
                        {<div style={{
                            display: item?.key === 'zhjc' ? 'block' : 'none'
                        }}>
                            <Zhjc onCompleted={data => {
                                setZhjcData(data)
                            }} onDetail={(data) => {
                                setDetail(data);
                            }} />
                        </div>}
                    </Leftpanel>
                </div>}

                {item?.key === 'bgsc' && <Bgsc onClose={e => { setItem(null) }} />}
                {detail && <YxfxXq detail={detail} onClose={e => {
                    setDetail(null)
                    setRightDetail(null);
                }} onRightDetail={record => {
                    setRightDetail(record)
                }} />}
                {rightDetail && detail && <Xq detail={detail} rightDetail={rightDetail} onClose={e => { setRightDetail(null) }} />}
            </ZhpgContext.Provider>

            {
                zhData?.yhmc && <div className='zhpg-name'>{zhData?.yhmc}</div>
            }
        </BusinessMap>
    </>;
}